/**
 * Sample React Native App
 * https://github.com/facebook/react-native
 *
 * @format
 */

import React from 'react';
import type {PropsWithChildren} from 'react';
import {MyLayout2,MyButton01} from './UiComponents';
import {MyBox,MyBox2} from './mybox';
import {DetailsScreen} from './robot01/details';
import {WaitingScreen} from './Waiting';
import { createStaticNavigation,useNavigation } from '@react-navigation/native';
import { createNativeStackNavigator } from '@react-navigation/native-stack';
import { NativeBaseProvider, Box, Button,Center } from "native-base";


import {  Provider as Provider2, Toast } from '@ant-design/react-native';

// import { CardStyleInterpolators } from '@react-navigation/stack';


import { Provider } from 'react-redux';
import {store} from './redux/store'; // 引入 Redux Store

import {
  SafeAreaView,
  ScrollView,
  StatusBar,
  StyleSheet,
  Text,
  useColorScheme,
  View,
} from 'react-native';

import {
  Colors,
  DebugInstructions,
  Header,
  LearnMoreLinks,
  ReloadInstructions,
} from 'react-native/Libraries/NewAppScreen';
import { Background } from '@react-navigation/elements';
import { Reanimated04, RotationExample } from './SVG01';
import { Loading } from './Loading';
import { Test01 } from './Redux01';
import { Test1127 } from './Loading2';
import { Test2000 } from './Anim01';
import { Test2001 } from './Rotate01';
import { Test3001 } from './Translate01';
import { Test4001 } from './Translate02';
import { DetailsScreen2 } from './robot01/waiting';
import { Login } from './robot01/login';
import { Demo1, FangAnku, WrapContentExample } from './robot01/fanganku';
import { FlatListExample, ModalExample } from './robot01/FlatListDemo';

type SectionProps = PropsWithChildren<{
  title: string;
}>;

function Section({children, title}: SectionProps): React.JSX.Element {
  const isDarkMode = useColorScheme() === 'dark';
  return (
    <View style={styles.sectionContainer}>
      <Text
        style={[
          styles.sectionTitle,
          {
            color: isDarkMode ? Colors.white : Colors.black,
          },
        ]}>
        {title}
      </Text>
      <Text
        style={[
          styles.sectionDescription,
          {
            color: isDarkMode ? Colors.light : Colors.dark,
          },
        ]}>
        {children}
      </Text>
    </View>
  );
}

const RootStack = createNativeStackNavigator({
  // initialRouteName: 'WaitingScreen',
  initialRouteName: 'FangAnku',
  // initialRouteName: 'Test4001',
  
  screens: {

    FangAnku: {
      screen: ModalExample,
      // screen: FlatListExample,
      // screen: FangAnku,
      options: {
        headerShown: false,
        orientation:"landscape",
        // title: 'My home',
        // cardStyleInterpolator: CardStyleInterpolators.forNoAnimation,
      },
    } ,




    Login: {
      screen: Login,
      options: {
        headerShown: false,
        orientation:"landscape",
        // title: 'My home',
        // cardStyleInterpolator: CardStyleInterpolators.forNoAnimation,
      },
    } ,

    Test4001: {
      screen: Test4001,
      options: {
        headerShown: false,
        orientation:"landscape",
        // title: 'My home',
        // cardStyleInterpolator: CardStyleInterpolators.forNoAnimation,
      },
    } ,

    DetailsScreen2: {
      screen: DetailsScreen2,
      options: {
        headerShown: false,
        orientation:"landscape",
        // title: 'My home',
        // cardStyleInterpolator: CardStyleInterpolators.forNoAnimation,
      },
    } ,

    Test3001: {
      screen: Test3001,
      options: {
        headerShown: false,
        orientation:"landscape",
        // title: 'My home',
        // cardStyleInterpolator: CardStyleInterpolators.forNoAnimation,
      },
    } ,

    Test2000: {
      screen: Test2000,
      options: {
        headerShown: false,
        orientation:"landscape",
        // title: 'My home',
        // cardStyleInterpolator: CardStyleInterpolators.forNoAnimation,
      },
    } ,

    Test2001: {
      screen: Test2001,
      options: {
        headerShown: false,
        orientation:"landscape",
        // title: 'My home',
        // cardStyleInterpolator: CardStyleInterpolators.forNoAnimation,
      },
    } ,



    Test1127: {
      screen: Test1127,
      options: {
        headerShown: false,
        orientation:"landscape",
        // title: 'My home',
        // cardStyleInterpolator: CardStyleInterpolators.forNoAnimation,
      },
    } ,

    Loading: {
      screen: Loading,
      options: {
        headerShown: false,
        orientation:"landscape",
        // title: 'My home',
        // cardStyleInterpolator: CardStyleInterpolators.forNoAnimation,
      },
    } ,


    Reanimated04: {
      screen: Reanimated04,
      options: {
        headerShown: false,
        orientation:"landscape",
        // title: 'My home',
        // cardStyleInterpolator: CardStyleInterpolators.forNoAnimation,
      },
    } ,

    RotationExample: {
      screen: RotationExample,
      options: {
        headerShown: false,
        orientation:"landscape",
        // title: 'My home',
        // cardStyleInterpolator: CardStyleInterpolators.forNoAnimation,
      },
    } ,

    MyBox2: {
      screen: MyBox2,
      options: {
        headerShown: false,
        orientation:"landscape",
        // title: 'My home',
        // cardStyleInterpolator: CardStyleInterpolators.forNoAnimation,
      },
    } ,

    WaitingScreen: {
      screen: WaitingScreen,
      options: {
        headerShown: false,
        orientation:"landscape",
        // title: 'My home',
        // cardStyleInterpolator: CardStyleInterpolators.forNoAnimation,
      },
    } ,

    Home: {
      screen: MyLayout2,
      options: {
        headerShown: false,
        orientation:"landscape",
        title: 'My home',
        // cardStyleInterpolator: CardStyleInterpolators.forNoAnimation,
      },
    } ,
    DetailsScreen:{
      screen:DetailsScreen,
      options: {
        orientation:"landscape",
        // headerTitle : "111",
        // statusBarHidden : true,
        statusBarAnimation: "none",
        // https://reactnavigation.org/docs/native-stack-navigator/#options
        animation: "none",
        // animation: "slide_from_bottom",  slide_from_right  slide_from_left
        headerShown: false,
        // cardStyleInterpolator: CardStyleInterpolators.forBottomSheetAndroid,
        // transitionSpec: {
        //   open: {
        //     animation: 'spring',  // 使用 spring 动画
        //     config: {
        //       stiffness: 300,
        //       damping: 25,
        //       mass: 1,
        //     },
        //   },
        // }
        // title: 'DetailsScreen',
      },

    }
     ,
  },
});

const Navigation = createStaticNavigation(RootStack);

  function App() {
    return   <Provider store={store}>
      <NativeBaseProvider>
        <Provider2>
      <Navigation />
      </Provider2>
      </NativeBaseProvider>
  </Provider>
}

function App2(): React.JSX.Element {
  const isDarkMode = useColorScheme() === 'dark';

  const backgroundStyle = {
    backgroundColor: isDarkMode ? Colors.darker : Colors.lighter,
  };

  return (
    <SafeAreaView style={backgroundStyle}>
      <StatusBar
        barStyle={isDarkMode ? 'light-content' : 'dark-content'}
        backgroundColor={backgroundStyle.backgroundColor}
      />
      <ScrollView
        contentInsetAdjustmentBehavior="automatic"
        style={backgroundStyle}>

 <View
          style={{
            backgroundColor: isDarkMode ? Colors.black : Colors.white,
          }}>

            <MyLayout2></MyLayout2>

            </View>

        {/* <Header />
        <View
          style={{
            backgroundColor: isDarkMode ? Colors.black : Colors.white,
          }}>
          <Section title="Step One">
            Edit <Text style={styles.highlight}>App.tsx</Text> to change this
            screen and then come back to see your edits.
          </Section>
          <Section title="See Your Changes">
            <ReloadInstructions />
          </Section>
          <Section title="Debug">
            <DebugInstructions />
          </Section>
          <Section title="Learn More">
            Read the docs to discover what to do next:
          </Section>
          <LearnMoreLinks />
        </View> */}
      </ScrollView>
    </SafeAreaView>
  );
}

const styles = StyleSheet.create({
  sectionContainer: {
    marginTop: 32,
    paddingHorizontal: 24,
  },
  sectionTitle: {
    fontSize: 24,
    fontWeight: '600',
  },
  sectionDescription: {
    marginTop: 8,
    fontSize: 18,
    fontWeight: '400',
  },
  highlight: {
    fontWeight: '700',
  },
});

export default App;
